<template>
  <div>
    111
    {{ CarStore.carColor }}
    <br />
    {{ CarStore.getCarColor }}
    <br />
    {{ CarStore.getCarName }}
    <br />
    {{ CarStore.carName }}
    <hr />
    {{ CarStoreSetup.carType }}
    <button type="button" @click="CarStore.setCarName('奔驰')">
      修改车辆名称
    </button>
    <button type="button" @click="CarStore.setCarColor('紫色')">
      修改车辆颜色
    </button>
    <div>
      下面是setup模式
      <hr />

      {{ CarStoreSetup.carType }}
      <button type="button" @click="CarStoreSetup.addCarType">
        修改车辆类型
      </button>
    </div>
    <div>
      下面是解构的模式
      <hr />

      {{ carColor }}
      {{ carName }}
      {{ "解构的carname" + getCarName + "嗯" }}
      <button type="button" @click="setCarColor('红色的')">
        修改车辆车颜色解构模式
      </button>
      <button type="button" @click="changeType('mpv')">
        在模板中直接修改store的数据
      </button>
      <button type="button" @click="CarStore.restData">重置数据</button>
    </div>
  </div>
</template>

<script setup>
import { useCarStore, useCarStoreSetup } from "@/store/index.js";
import { storeToRefs } from "pinia";
//必须先执行useCarStor和useCarStoreSetup才可以使用。
const CarStore = useCarStore();
const  CarStoreSetup= useCarStoreSetup();
// console.log(
//   "%c [useCarStore]: ",
//   "color: #bf2c9f; background: pink; font-size: 13px;",
//   CarStore
// );
// console.log(
//   "%c [useCarStoreSetup]: ",
//   "color: #bf2c9f; background: pink; font-size: 13px;",
//   CarStoreSetup
// );
//如果使用ES6解构pinia仓库，需要使用storeToRefs();
const { carColor, carName,getCarColor,getCarName } = storeToRefs(CarStore);
//TODO actions里面的方法不可以解构，也就是setCarColor,setCarName不可以解构；
//可以直接解构
 const {setCarColor, setCarName} = CarStore;
 //在使用的地方直接修改：
const changeType =(val)=>{
  CarStoreSetup.carType = val;
}


</script>

<style lang="less" scoped></style>
